<template>
    <div class="main">
        <!-- 标题 -->
        <p>写信</p>

        <!-- 表单 -->
        <div>
            <el-form ref="form" :model="form">
                <el-form-item>
                    <el-select v-model="form.type" placeholder="请选择...">
                    <el-option label="邮件" value="1"></el-option>
                    <el-option label="通知" value="2"></el-option>
                    <el-option label="公告" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="form.type2" placeholder="请选择...">
                    <el-option label="一般" value="1"></el-option>
                    <el-option label="重要" value="2"></el-option>
                    <el-option label="紧急" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="form.type3" placeholder="请选择...">
                    <el-option label="内部邮件" value="1"></el-option>
                    <el-option label="客户咨询信" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="form.name" placeholder="收件人：">
                        <el-button icon="el-icon-plus" slot="append" @click="dialogTableVisible = true" class="btn">通讯录</el-button>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="form.zhuTi" placeholder="主题："></el-input>
                </el-form-item>
                
                <el-form-item class="fuWenBen">
                    <template>
                        <div style="border: 1px solid #ccc;">
                            <Toolbar
                                style="border-bottom: 1px solid #ccc"
                                :editor="editor"
                                :defaultConfig="toolbarConfig"
                                :mode="mode"
                            />
                            <Editor
                                style="height: 500px; overflow-y: hidden;"
                                v-model="html"
                                :defaultConfig="editorConfig"
                                :mode="mode"
                                @onCreated="onCreated"
                            />
                        </div>
                    </template>
                </el-form-item>
                <el-form-item>
                    <el-button icon="el-icon-paperclip">增加附件</el-button>
                </el-form-item>
                <el-form-item class="btn3">
                    <el-button icon="el-icon-close" @click="fangQi()">放弃</el-button>
                    <el-button icon="el-icon-edit">存草稿</el-button>
                    <el-button icon="el-icon-message" type="primary">发送</el-button>
                </el-form-item>
            </el-form>
        </div>

         <!-- 点击收件人输入框中通讯录按钮的弹框 -->
        <div>
            <el-dialog :visible.sync="dialogTableVisible">
                <div class="top">
                    <div class="btn2">
                         <el-button type="success" icon="el-icon-plus">新增到地址栏</el-button>
                         <el-button type="success" icon="el-icon-plus">追加到地址栏</el-button>
                    </div>
                    <div class="search">
                        <el-input v-model="input2" placeholder="请输入...">
                            <el-button icon="el-icon-search" slot="append"></el-button>
                        </el-input>
                    </div>
                </div>
                
                <el-table :data="gridData">
                    <el-table-column property="xuanZe" label="选择" width="80">
                        <template>
                            <el-checkbox label=""></el-checkbox>
                        </template>
                    </el-table-column>
                    <el-table-column property="department" label="部门" width="150"></el-table-column>
                    <el-table-column property="name" label="真实姓名" width="150"></el-table-column>
                    <el-table-column property="name2" label="用户名" width="150"></el-table-column>
                    <el-table-column property="role" label="角色" width="150"></el-table-column>
                    <el-table-column property="phone" label="电话"></el-table-column>
                </el-table>

                <!-- 页码内容 -->
                <div class="pages clear">
                    <div class="leftPage">
                        <span>共 <b>3</b> 条 | 每页 <b>20</b> 条 | 共 <b>6</b> 页</span>
                    </div>
                    <div class="rightPage">
                        <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="60">
                        </el-pagination>
                    </div>
                </div>
            </el-dialog>
        </div>

    </div>
</template>
<script>
import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default {
// eslint-disable-next-line vue/multi-word-component-names
name:"",
components:{Editor, Toolbar},
data(){
    return {
        editor: null,
        html: '<p>hello</p>',
        toolbarConfig: { },
        editorConfig: { placeholder: '请输入内容...' },
        mode: 'default', // or 'simple'
        form:{
            type:'',
            type2:'',
            type3:'',
            name:'',
            zhuTi:''
        },
        dialogTableVisible:false,
        gridData:[
            {
                xuanZe:'',
                department:'泌尿科',
                name:'张三',
                name2:'鲜花',
                role:'院长',
                phone:'15223564781'
            },
             {
                xuanZe:'',
                department:'心内科',
                name:'李四',
                name2:'百合花',
                role:'主任',
                phone:'15223564781'
            },
             {
                xuanZe:'',
                department:'耳鼻喉科',
                name:'孙策',
                name2:'松柏',
                role:'秘书',
                phone:'15223564781'
            }
        ]
    }
    },
methods:{
        // 富文本编辑器
    onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    // 点击放弃按钮，返回到主界面
    fangQi(){
        this.$router.push('/home/emailManagement')
    }
    }
}
</script>
<style lang="less" scoped>
.main{
    background-color: white;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.main p{
    font-size: 18px;
    padding-bottom: 20px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(161, 158, 158, 0.452);
    margin-bottom: 10px;
}
.el-select{
    width: 100%;
}
.btn{
    background-color: green !important;
    color: rgb(241, 239, 239) !important;
}
.btn3{
    text-align: right;
}
.top{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid rgba(161, 158, 158, 0.452);
    padding: 0 0 20px;
    box-sizing: border-box;
}
.search{
    width: 30%;
}
 .pages{
        background-color: #FAFAFA;
        padding: 20px;
        .leftPage{
            float: left;
        }
        .rightPage{
            float: right;
        }
    }
</style>